/* =========================================================
   DUKE HAIR — Colour Studio
   Token system
   ========================================================= */
:root{
  --espresso:   #241a14;   /* deep warm base — studio dark sections */
  --espresso-2: #1a120d;   /* darkest — footer / recesses */
  --espresso-3: #33261c;   /* raised surface on dark */
  --paper:      #f2e9dc;   /* warm bone paper — light sections */
  --paper-2:    #e8dac2;   /* raised surface on paper */
  --copper:     #b1602f;   /* primary accent */
  --copper-light:#d68a52;
  --brass:      #8a7148;   /* hairlines, secondary text/borders */
  --ink:        #241f1a;   /* body text on paper */
  --moss:       #4a5a44;   /* single cool counterpoint accent */
  --cream-text: #efe6d8;   /* body text on dark */

  --font-display-kr: 'Gowun Batang', serif;
  --font-display-en: 'Fraunces', serif;
  --font-body: 'Noto Sans KR', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul,dl{list-style:none;}
button{font-family:inherit;}

.container{max-width:1180px;margin:0 auto;padding:0 32px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
}

/* ---------- focus ---------- */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--copper);
  outline-offset:3px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  padding:15px 32px;
  font-size:13.5px;
  letter-spacing:.5px;
  font-weight:500;
  border:1px solid transparent;
  transition:all .3s ease;
}
.btn--solid{background:var(--copper);color:var(--paper);}
.btn--solid:hover{background:var(--copper-light);}
.btn--line{border-color:var(--brass);color:var(--ink);}
.btn--line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn--on-dark{border-color:rgba(242,233,220,.5);color:var(--cream-text);}
.btn--on-dark:hover{background:rgba(242,233,220,.12);border-color:var(--cream-text);}
.btn--small{padding:9px 20px;font-size:12.5px;}

/* ---------- Header ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:26px 0;
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
.header__inner{
  max-width:1180px;margin:0 auto;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;
}
.header.is-scrolled{
  background:rgba(26,18,13,.92);
  padding:16px 0;
  box-shadow:0 8px 30px rgba(0,0,0,.2);
  backdrop-filter:blur(8px);
}
.logo{display:flex;align-items:center;gap:12px;}

/* Logo artwork ships on a square white canvas with generous padding.
   Crop tightly to the wordmark via a fixed window + scaled/offset image,
   so it reads as a proper navbar lockup instead of a big white tile. */
.logo__mark{
  display:block;
  position:relative;
  overflow:hidden;
  width:57px;height:44px;
  border-radius:3px;
}
.logo__mark img{
  position:absolute;
  width:70px;height:70px;
  max-width:none;
  left:-6.5px;top:-10.7px;
}
.logo__mark--footer{width:61.1px;height:46.8px;}
.logo__mark--footer img{width:74.75px;height:74.75px;left:-6.89px;top:-11.31px;}

.logo__kr{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:10px;
  letter-spacing:3px;
  color:var(--cream-text);
}
.nav{display:flex;gap:38px;}
.nav a{
  display:flex;align-items:baseline;gap:7px;
  color:var(--cream-text);
  font-size:14px;
  opacity:.88;
}
.nav a:hover{opacity:1;color:var(--copper-light);}
.nav__num{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--brass);
}
.nav-cta{color:var(--cream-text);border-color:rgba(242,233,220,.5);}
.nav-cta:hover{background:rgba(242,233,220,.12);color:var(--cream-text);border-color:var(--cream-text);}

.hamburger{
  display:none;flex-direction:column;gap:6px;justify-content:center;
  width:28px;height:20px;background:none;border:none;cursor:pointer;z-index:1100;
}
.hamburger span{width:100%;height:1.5px;background:var(--cream-text);display:block;transition:.3s;}
.hamburger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg);}

.mobile-nav{
  position:fixed;top:0;right:0;height:100vh;width:min(300px,82vw);
  background:var(--espresso-2);
  transform:translateX(100%);
  transition:transform .4s ease;
  z-index:1050;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 40px;gap:30px;
  border-left:1px solid rgba(138,113,72,.3);
}
.mobile-nav.is-open{transform:translateX(0);}
.mobile-nav a{
  color:var(--cream-text);font-size:17px;font-family:var(--font-mono);letter-spacing:.5px;
}
.mobile-nav a:hover{color:var(--copper-light);}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100vh;
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0;background:var(--espresso);}
.hero__video{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) brightness(.72);
}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(0deg, rgba(20,14,10,.92) 0%, rgba(20,14,10,.55) 42%, rgba(20,14,10,.25) 70%, rgba(20,14,10,.35) 100%),
    linear-gradient(100deg, rgba(20,14,10,.55) 0%, transparent 55%);
}
.hero__grain{
  position:absolute;inset:0;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(0deg, #fff 0px, transparent 1px, transparent 2px);
}
.hero__content{
  position:relative;z-index:1;
  padding:0 32px 150px;
  max-width:720px;
  color:var(--cream-text);
}
.hero__eyebrow{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:3px;
  color:#fff;
  margin-bottom:26px;
}
.hero__title{
  font-family:var(--font-display-kr);
  font-weight:700;
  font-size:clamp(34px,5.4vw,58px);
  line-height:1.38;
  margin-bottom:26px;
  text-shadow:0 2px 24px rgba(0,0,0,.3);
}
.hero__desc{
  font-size:15.5px;
  color:rgba(239,230,216,.82);
  margin-bottom:38px;
  line-height:1.9;
}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap;}

.hero__plate{
  position:absolute;
  left:32px;bottom:34px;
  z-index:1;
  display:flex;
  align-items:center;
  gap:12px;
}
.hero__plate .plate__tag{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:1.5px;
  color:var(--espresso);
  background:var(--copper-light);
  padding:4px 9px;
}
.hero__plate .plate__desc{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:1px;
  color:rgba(239,230,216,.65);
}

.scroll-cue{
  position:absolute;right:32px;bottom:36px;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:rgba(239,230,216,.7);
}
.scroll-cue__line{
  width:1px;height:46px;
  background:linear-gradient(180deg, rgba(239,230,216,.9), transparent);
  position:relative;
  overflow:hidden;
}
.scroll-cue__line::after{
  content:'';
  position:absolute;left:0;top:-100%;width:100%;height:100%;
  background:var(--copper-light);
  animation:scrollFall 2.2s infinite;
}
@keyframes scrollFall{
  0%{top:-100%;}
  60%{top:100%;}
  100%{top:100%;}
}
.scroll-cue__label{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:2px;
  writing-mode:vertical-rl;
}

@media (max-width:640px){
  .hero{align-items:flex-end;}
  .hero__content{padding:0 24px 190px;}
  .hero__title{font-size:clamp(26px,7.2vw,32px);}
  .hero__plate{left:24px;bottom:24px;flex-direction:column;align-items:flex-start;gap:6px;}
  .scroll-cue{display:none;}
}

/* ---------- Section generic ---------- */
.section{padding:130px 0;scroll-margin-top:88px;}
.section-eyebrow{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:2.5px;
  color:var(--copper);
  margin-bottom:18px;
}
.section-title{
  font-family:var(--font-display-kr);
  font-weight:700;
  font-size:clamp(27px,3.6vw,38px);
  line-height:1.45;
}
.section-sub{margin-top:16px;color:var(--brass);font-size:14px;}
.reservation__notice{font-size:17px;color:var(--ink);}
.reservation__notice .highlight{
  color:var(--copper);
  font-weight:700;
  position:relative;
  padding:0 2px;
}
.reservation__notice .highlight::after{
  content:'';
  position:absolute;left:0;right:0;bottom:1px;
  height:6px;
  background:rgba(177,96,47,.18);
  z-index:-1;
}

/* dark-section overrides */
.menu,.location{
  background:var(--espresso);
  color:var(--cream-text);
}
.menu .section-eyebrow,.location .section-eyebrow{color:var(--copper-light);}
.menu .section-title,.location .section-title{color:var(--cream-text);}
.menu .section-sub{color:rgba(239,230,216,.55);}

/* ---------- Social ---------- */
.social{
  background:var(--copper);
  padding:90px 0;
}
.social__inner{display:flex;flex-direction:column;gap:44px;}
.social .section-eyebrow{
  display:inline-block;
  background:var(--espresso);
  color:var(--copper-light);
  padding:6px 14px;
}
.social .section-title{color:var(--paper);}
.social__links{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.social__card{
  display:flex;align-items:center;gap:18px;
  background:rgba(36,25,20,.14);
  border:1px solid rgba(242,233,220,.4);
  padding:26px 28px;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.social__card:hover{
  background:rgba(36,25,20,.24);
  border-color:var(--paper);
  transform:translateY(-3px);
}
.social__icon{width:46px;height:46px;flex:none;border-radius:8px;overflow:hidden;}
.social__icon svg{width:100%;height:100%;display:block;}
.social__text{display:flex;flex-direction:column;gap:5px;flex:1;}
.social__text strong{
  font-family:var(--font-display-kr);
  font-weight:700;font-size:17px;
  color:var(--paper);
}
.social__text span{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.3px;
  color:rgba(242,233,220,.85);
}
.social__arrow{
  font-family:var(--font-mono);
  font-size:17px;color:var(--paper);
  opacity:.75;
  transition:transform .3s ease;
}
.social__card:hover .social__arrow{transform:translateX(5px);opacity:1;}
@media (max-width:640px){
  .social__links{grid-template-columns:1fr;}
}

/* ---------- Plate component (signature motif) ---------- */
.plate{
  position:relative;
  border:1px solid var(--brass);
  padding:10px;
  background:var(--paper);
}
.plate img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.96);
}
.plate__caption{
  position:absolute;
  left:10px;bottom:10px;right:10px;
  display:flex;
  align-items:center;
  gap:10px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
}
.plate:hover .plate__caption,.plate:focus-within .plate__caption{opacity:1;transform:translateY(0);}
.plate__tag{
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:1.5px;
  background:var(--espresso);
  color:var(--copper-light);
  padding:4px 8px;
  flex-shrink:0;
}
.plate__desc{
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.5px;
  color:#fff;
  background:rgba(20,14,10,.55);
  padding:4px 8px;
}

/* ---------- About ---------- */
.about__grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:90px;
  align-items:center;
}
.about__visuals{position:relative;padding-bottom:14%;}
.plate--main{aspect-ratio:4/5;}
.plate--sub{
  aspect-ratio:5/4;
  width:56%;
  position:absolute;
  left:-9%;
  bottom:0;
  box-shadow:0 22px 50px -18px rgba(20,14,10,.45);
}
.about__lead{
  font-family:var(--font-display-en);
  font-style:italic;
  font-size:20px;
  color:var(--copper);
  margin:26px 0 22px;
}
.about__body{color:#4a4137;margin-bottom:16px;font-size:15px;}
.about__stats{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--brass);
}
.about__stat{
  padding:20px 14px 0 14px;
  border-right:1px solid rgba(138,113,72,.4);
}
.about__stat:first-child{padding-left:0;}
.about__stat:last-child{border-right:none;}
.about__stat dt{
  font-family:var(--font-display-en);
  font-weight:600;
  font-size:20px;
  color:var(--copper);
  margin-bottom:8px;
}
.about__stat dd{font-size:12.5px;color:var(--brass);letter-spacing:.2px;}

@media (max-width:900px){
  .about__grid{grid-template-columns:1fr;gap:100px 0;}
  .about__visuals{max-width:420px;margin:0 auto;padding-bottom:22%;}
}
@media (max-width:640px){
  .about__stats{grid-template-columns:repeat(2,1fr);row-gap:20px;}
  .about__stat{border-right:none;padding-left:14px;}
  .about__stat:nth-child(odd){
    border-right:1px solid rgba(138,113,72,.4);
    padding-left:0;
  }
  .about__stat:nth-child(-n+2){
    padding-bottom:16px;
    border-bottom:1px solid rgba(138,113,72,.4);
  }
  .about__stat:nth-child(n+3){padding-top:16px;}
}
@media (max-width:400px){
  .about__stats{grid-template-columns:1fr;border-top:none;row-gap:0;}
  .about__stat{
    border-right:none !important;
    border-bottom:none !important;
    padding:16px 0 0 !important;
    border-top:1px solid rgba(138,113,72,.4);
  }
}

/* ---------- Menu ---------- */
.menu__head{text-align:left;max-width:560px;margin-bottom:32px;}

.menu__level-tabs{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border:1px solid rgba(138,113,72,.4);
  border-radius:999px;
  margin-bottom:56px;
}
.menu__level-tab{
  background:none;border:none;
  padding:10px 30px;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:12.5px;letter-spacing:1.5px;
  color:rgba(239,230,216,.55);
  cursor:pointer;
  transition:background .25s ease,color .25s ease;
}
.menu__level-tab:hover{color:var(--cream-text);}
.menu__level-tab.is-active{
  background:var(--copper);
  color:var(--espresso-2);
}

.menu__level-group{display:none;}
.menu__level-group.is-active{display:block;animation:fadeIn .4s ease;}

.menu__grid{
  display:grid;
  grid-template-columns:0.85fr 1.4fr;
  gap:70px;
  align-items:start;
}
.plate--menu{aspect-ratio:4/5;border-color:rgba(138,113,72,.5);}
.plate--menu .plate__tag{background:var(--copper);color:var(--espresso-2);}

.menu__tabs{
  display:flex;
  gap:34px;
  border-bottom:1px solid rgba(138,113,72,.4);
  margin-bottom:40px;
}
.menu__tab{
  background:none;border:none;
  padding:0 0 16px;
  font-family:var(--font-mono);
  font-size:13px;letter-spacing:1.5px;
  color:rgba(239,230,216,.45);
  cursor:pointer;
  position:relative;
  transition:color .25s;
}
.menu__tab::after{
  content:'';
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--copper-light);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.menu__tab:hover{color:var(--cream-text);}
.menu__tab.is-active{color:var(--cream-text);}
.menu__tab.is-active::after{transform:scaleX(1);}

.menu__panel{display:none;flex-direction:column;}
.menu__panel.is-active{display:flex;animation:fadeIn .45s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.menu__item{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:19px 2px;
  border-bottom:1px solid rgba(138,113,72,.25);
  font-size:15px;
}
.menu__item span:first-child{color:var(--cream-text);font-weight:400;}
.menu__item span:last-child{
  font-family:var(--font-mono);
  color:var(--copper-light);
  font-size:13.5px;
}
.menu__note{margin-top:22px;font-size:12.5px;color:rgba(239,230,216,.75);}

.menu__deal{
  display:flex;align-items:baseline;gap:14px;
  padding:17px 2px;
  border-bottom:1px solid rgba(138,113,72,.25);
  font-size:15px;
}
.menu__deal-num{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--brass);
  flex-shrink:0;
}
.menu__deal-name{
  color:var(--cream-text);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.menu__deal-price{
  margin-left:auto;
  flex-shrink:0;
  display:flex;align-items:baseline;gap:8px;
  font-family:var(--font-mono);
}
.menu__price-reg{
  font-size:12px;
  color:rgba(239,230,216,.35);
  text-decoration:line-through;
}
.menu__price-sale{
  font-size:13.5px;
  color:var(--copper-light);
}
.menu__badge{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.5px;
  padding:2px 7px;
  border-radius:999px;
  line-height:1.6;
}
.menu__badge--best{background:var(--copper);color:var(--espresso-2);}
.menu__badge--pick{background:none;border:1px solid var(--moss);color:#8fae86;}

@media (max-width:820px){
  .menu__grid{grid-template-columns:1fr;gap:44px;}
  .plate--menu{max-width:280px;}
}
@media (max-width:480px){
  .menu__deal{flex-wrap:wrap;}
  .menu__deal-price{margin-left:38px;}
}

/* ---------- Reservation ---------- */
.reservation__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:rgba(138,113,72,.35);
  border:1px solid rgba(138,113,72,.35);
}
.rcard{
  position:relative;
  background:var(--paper);
  padding:44px 32px;
  text-align:left;
  transition:background .3s ease;
}
.rcard:not(.rcard--info):hover{background:var(--paper-2);}
.rcard__tag{
  position:absolute;top:24px;right:28px;
  font-family:var(--font-mono);
  font-size:11px;color:var(--brass);
}
.rcard__icon{
  width:46px;height:46px;
  border:1px solid var(--copper);
  color:var(--copper);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
}
.rcard__icon svg{width:21px;height:21px;}
.rcard h3{
  font-family:var(--font-display-kr);
  font-weight:700;
  font-size:18px;margin-bottom:10px;
}
.rcard p{color:#4a4137;font-size:14px;margin-bottom:18px;}
.rcard__link{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.5px;
  color:var(--copper);
}
.rcard__phone{
  color:#4a4137;
  transition:color .2s ease;
}
.rcard__phone:hover,.rcard__phone:focus-visible{color:var(--copper);}

@media (max-width:820px){
  .reservation__grid{grid-template-columns:1fr;}
}

/* ---------- Location ---------- */
.location__grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:70px;
  align-items:stretch;
}
.location__map{
  height:100%;
  display:flex;flex-direction:column;
  gap:16px;
}
.location__map-embed{
  position:relative;
  flex:1;
  min-height:300px;
  border:1px solid rgba(138,113,72,.6);
  overflow:hidden;
}
.location__map-embed iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
  filter:saturate(.75) contrast(1.02);
}
.location__map-link{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--brass);
  transition:color .25s ease;
  align-self:flex-start;
}
.location__map-link:hover,.location__map-link:focus-visible{color:var(--copper-light);}
.location__map-link svg{width:18px;height:18px;flex-shrink:0;}
.location__map-link span{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.5px;}
.location__info{display:flex;flex-direction:column;justify-content:center;}
.location__info dl{margin-top:30px;}
.location__row{
  display:grid;grid-template-columns:76px 1fr;gap:20px;
  padding:16px 0;
  border-top:1px solid rgba(138,113,72,.3);
}
.location__row:last-child{border-bottom:1px solid rgba(138,113,72,.3);}
.location__row dt{
  font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:1px;
  color:var(--copper-light);
  padding-top:2px;
}
.location__row dd{font-size:14.5px;color:rgba(239,230,216,.85);}
.addr-badge{
  display:inline-block;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:11.5px;letter-spacing:.3px;
  color:var(--copper-light);
  background:rgba(214,138,82,.14);
  border:1px solid var(--copper-light);
  padding:3px 9px;
  margin-left:6px;
  white-space:nowrap;
}

.parking-list{display:flex;flex-direction:column;gap:10px;}
.parking-list li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  padding-left:14px;
  position:relative;
}
.parking-list li::before{
  content:'—';
  position:absolute;left:0;
  color:var(--copper-light);
}
.parking-list__name{color:rgba(239,230,216,.9);}
.parking-list__addr{
  font-family:var(--font-mono);
  font-size:12px;
  color:rgba(239,230,216,.5);
}

@media (max-width:820px){
  .location__grid{grid-template-columns:1fr;}
}

/* ---------- Footer ---------- */
.footer{background:var(--espresso-2);color:rgba(239,230,216,.55);padding:60px 0 36px;}
.footer__inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
}
.footer__brand{display:flex;flex-direction:column;align-items:center;gap:10px;}
.footer__addr{font-size:13px;}
.footer__copy{font-size:11.5px;color:rgba(239,230,216,.3);margin-top:8px;}

/* ---------- Reveal animation ---------- */
[data-animate]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
[data-animate].is-visible{opacity:1;transform:translateY(0);}

.hero__content > [data-animate]:nth-child(1){transition-delay:.1s;}
.hero__content > [data-animate]:nth-child(2){transition-delay:.22s;}
.hero__content > [data-animate]:nth-child(3){transition-delay:.34s;}
.hero__content > [data-animate]:nth-child(4){transition-delay:.46s;}
.hero__plate[data-animate]{transition-delay:.6s;}

/* ---------- Responsive: nav ---------- */
@media (max-width:900px){
  .nav,.nav-cta{display:none;}
  .hamburger{display:flex;}
}
@media (max-width:520px){
  .section{padding:92px 0;}
  .hero__cta{flex-direction:column;align-items:stretch;}
  .btn{text-align:center;}
}