/* Naturallynatural 공통 스타일 — 토큰·리셋·헤더. 페이지 고유 스타일은 각 페이지 <style>에. */
:root{
  --cream:#F4F0E6; --paper:#E8E3D5; --ink:#1F1D18; --sage:#4F5A3C; --stone:#B5AD96; --grey:#8B8475;
  --gutter: clamp(24px, 5vw, 56px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{overflow-x:clip}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:20px var(--gutter);
  mix-blend-mode:difference; color:#F4F0E6;
}
.logo{font-size:15px; font-weight:400; letter-spacing:0.02em; display:inline-flex; align-items:center; gap:10px}
.logo .mark{height:16px; width:auto; display:block; opacity:.9}
nav{display:flex; gap:28px; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; margin-left:auto; flex-shrink:0}
nav a{opacity:.85} nav a:hover{opacity:1}
nav a{position:relative}
nav a.on{opacity:1}
nav a.on::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:0 50%;
  animation:nav-draw .7s cubic-bezier(.16,1,.3,1) .35s forwards;
}
@keyframes nav-draw{to{transform:scaleX(1)}}

footer a{color:inherit; border-bottom:1px solid rgba(139,132,117,.55); padding-bottom:1px; transition:color .3s}
footer a:hover{color:var(--cream)}

/* 모바일 헤더: 로고·메뉴 크기와 간격 축소 */
@media (max-width:700px){
  header{padding:16px var(--gutter); gap:14px}
  .logo{font-size:13.5px; gap:8px}
  .logo .mark{height:14px}
  nav{gap:14px; font-size:10.5px; letter-spacing:0.1em}
  /* 손가락으로 누를 수 있도록 눌리는 범위만 넓힌다 (보이는 크기는 그대로) */
  header nav a{padding:13px 6px; margin:-13px -6px}
  /* 밑줄은 넓힌 영역이 아니라 글자 기준으로 (padding 13px·6px 만큼 되돌린다) */
  header nav a.on::after{bottom:9px; left:6px; right:6px}
  header .logo{padding:11px 0; margin:-11px 0}
  .works-head a, .cta .links a{display:inline-block; padding-top:12px; margin-top:-12px}
}

/* 표준 푸터 (전 페이지 공통) */
footer{background:var(--ink); color:var(--grey); font-size:11.5px; padding:26px var(--gutter) 36px; text-align:center; letter-spacing:0.04em}
footer img{height:125px; width:auto; margin:0 auto 18px; opacity:.9; display:block}
footer p{line-height:2; word-break:keep-all}