/* ============================================================
   MO RAN SPA — Organic wellness boutique, An Thuong, Da Nang
   Stylesheet: tokens, layout, components, motion, responsive
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --cream:#F6F1E7;
  --sand:#ECE3D2;
  --offwhite:#FFFDF8;
  --forest:#2F5D45;
  --forest-deep:#244B35;
  --forest-soft:#3E6544;
  --terracotta:#9C6B3F;
  --clay:#B0764E;
  --clay-soft:#C58B58;
  --bark:#2B2620;
  --stone:#6B6256;
  --line:rgba(43,38,32,.12);
  --gold:#C99A5B;

  /* role tokens — re-mapped by [data-palette] */
  --bg:var(--cream);
  --bg-alt:var(--sand);
  --heading:var(--forest);
  --accent:var(--terracotta);
  --accent-2:var(--clay);
  --btn-bg:var(--forest);
  --btn-bg-hover:var(--forest-deep);
  --deepband:var(--forest);
  --deepband-text:#EFE7D6;

  --maxw:1200px;
  --pad:24px;
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 2px 14px rgba(43,38,32,.06);
  --shadow:0 18px 50px rgba(43,38,32,.12);
  --shadow-lg:0 30px 80px rgba(43,38,32,.18);

  --serif:"Cormorant Garamond", "Noto Serif KR", Georgia, "Times New Roman", serif;
  --sans:"Manrope", "Noto Sans KR", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif-weight:600;

  --leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5C6 7 5 13.5 12 22.5 19 13.5 18 7 12 1.5Z'/%3E%3C/svg%3E");
}

/* heading-font tweak */
[data-font="fraunces"]{ --serif:"Fraunces", "Noto Serif KR", Georgia, serif; --serif-weight:540; }
[data-font="playfair"]{ --serif:"Playfair Display", "Noto Serif KR", Georgia, serif; --serif-weight:600; }

/* palette emphasis tweaks */
[data-palette="forest"]{
  --bg:#F2EFE6; --bg-alt:#E6E9DF;
  --heading:var(--forest-deep);
  --accent:var(--forest-soft); --accent-2:var(--terracotta);
  --btn-bg:var(--forest); --btn-bg-hover:var(--forest-deep);
  --deepband:var(--forest-deep); --deepband-text:#E9E6D2;
}
[data-palette="cream"]{
  --bg:#FBF7EE; --bg-alt:#F1EADB;
  --heading:#3a3026;
  --accent:var(--clay); --accent-2:var(--terracotta);
  --btn-bg:var(--bark); --btn-bg-hover:#000;
  --deepband:#2B2620; --deepband-text:#EFE7D6;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--bark);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .4s ease;
}
/* organic paper grain — subtle premium warmth */
body::after{
  content:""; position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:var(--serif-weight);
  color:var(--heading);
  margin:0;
  line-height:1.04;
  letter-spacing:.005em;
}

.wrap{ width:min(var(--maxw), calc(100% - 2*var(--pad))); margin-inline:auto; }
.section{ padding:clamp(64px,9vw,118px) 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans);
  font-size:.74rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow::before{ content:""; width:15px; height:15px; flex:none; background:var(--accent); -webkit-mask:var(--leaf) center/contain no-repeat; mask:var(--leaf) center/contain no-repeat; opacity:.9; }
.eyebrow::after{ content:""; width:22px; height:1.5px; background:var(--accent); opacity:.45; }
.section-head{ max-width:680px; }
.section-head h2{ font-size:clamp(2.1rem,4.6vw,3.25rem); margin:.45em 0 .35em; }
.section-head p{ color:var(--stone); font-size:1.05rem; margin:0; text-wrap:pretty; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 26px; border-radius:999px;
  font-family:var(--sans); font-weight:700; font-size:1rem; letter-spacing:.01em;
  border:1.5px solid transparent; transition:transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn svg{ width:19px; height:19px; flex:none; }
.btn-primary{ background:var(--btn-bg); color:var(--offwhite); box-shadow:0 14px 30px rgba(47,93,69,.28); }
.btn-primary:hover{ background:var(--btn-bg-hover); transform:translateY(-2px); box-shadow:0 20px 38px rgba(47,93,69,.34); }
.btn-ghost{ background:transparent; color:var(--heading); border-color:color-mix(in srgb,var(--heading) 35%, transparent); }
.btn-ghost:hover{ background:color-mix(in srgb,var(--heading) 8%, transparent); transform:translateY(-2px); }
.btn-light{ background:var(--offwhite); color:var(--heading); box-shadow:var(--shadow-sm); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-block{ width:100%; }

/* ---------- Nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.nav-in{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  height:78px;
}
.nav.scrolled{ background:color-mix(in srgb,var(--bg) 90%, transparent); backdrop-filter:blur(16px) saturate(1.2); border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(43,38,32,.06); }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:46px; width:auto; transition:height .35s ease; }
.nav.scrolled .brand img{ height:40px; }
.brand-name{ display:none; }

.nav-links{ display:none; align-items:center; gap:30px; }
.nav-links a{ font-weight:600; font-size:.96rem; color:var(--bark); opacity:.82; position:relative; padding:6px 0; transition:opacity .2s; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--accent); transition:width .25s ease; }
.nav-links a:hover{ opacity:1; }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:none; }

/* right cluster + language switch */
.nav-right{ display:flex; align-items:center; gap:10px; }
.lang-switch{ display:flex; align-items:center; gap:2px; padding:3px; border-radius:999px; border:1px solid var(--line); background:color-mix(in srgb,var(--offwhite) 72%, transparent); }
.lang-switch button{ border:none; background:none; padding:7px 11px; border-radius:999px; font-family:var(--sans); font-weight:700; font-size:.82rem; line-height:1; color:var(--stone); transition:background .2s, color .2s; white-space:nowrap; }
.lang-switch button[aria-pressed="true"]{ background:var(--btn-bg); color:var(--offwhite); }
.lang-full{ display:none; }
.lang-compact{ display:flex; }
/* contrast while nav sits transparent on the dark full-bleed hero */
.nav:not(.scrolled)[data-on-dark] .lang-switch{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); }
.nav:not(.scrolled)[data-on-dark] .lang-switch button{ color:#fff; }
.nav:not(.scrolled)[data-on-dark] .lang-switch button[aria-pressed="true"]{ background:#fff; color:var(--forest-deep); }

/* nav on transparent hero (top, not scrolled) — text uses cream over dark hero */
.nav:not(.scrolled) .nav-links a{ color:var(--offwhite); opacity:.92; text-shadow:0 1px 8px rgba(0,0,0,.35); }
.nav:not(.scrolled) .nav-links a::after{ background:var(--offwhite); }
.nav:not(.scrolled) .brand-fallback{ color:#fff; }
[data-hero="split"] .nav:not(.scrolled) .nav-links a{ color:var(--bark); text-shadow:none; }

.hamburger{
  display:inline-flex; flex-direction:column; gap:5px; justify-content:center;
  width:46px; height:46px; border-radius:12px; border:1px solid var(--line);
  background:color-mix(in srgb,var(--offwhite) 70%, transparent); padding:0 11px;
}
.hamburger span{ height:2px; background:var(--bark); border-radius:2px; transition:transform .3s ease, opacity .2s ease; }
.nav:not(.scrolled)[data-on-dark] .hamburger span{ background:#fff; }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile menu drawer */
.mobile-menu{
  position:fixed; inset:0; z-index:55; background:var(--bg);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 40px; transform:translateX(100%); transition:transform .4s cubic-bezier(.7,0,.2,1);
  visibility:hidden;
}
.mobile-menu.open{ transform:translateX(0); visibility:visible; }
.mobile-menu a{ font-family:var(--serif); font-size:2.4rem; color:var(--heading); padding:8px 0; border-bottom:1px solid var(--line); }
.mobile-menu .mm-cta{ margin-top:24px; }
.mobile-menu .mm-contact{ margin-top:20px; color:var(--stone); font-size:.95rem; line-height:1.8; }