/* =========================================================
   Laura Gil Sánchez — Makeup Artist
   Global stylesheet
   ========================================================= */

:root{
  --bg:#f5efe4; --panel:#ece2d1; --ink:#23201b; --body:#4a443b;
  --soft:#6c6356; --muted:#857a6b; --faint:#9c917e;
  --line:rgba(35,32,27,0.13); --line2:rgba(35,32,27,0.22);
  --footer:#e7dcc9; --gold:#a67a30; --goldsoft:#8c6622; --galgray:0;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Jost',sans-serif;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--gold);color:#fff;}

/* ---- Reveal on scroll ----
   Only hide when JS is active (html.js). Without JS the content
   stays fully visible — it can never "disappear". */
html.js .rv{opacity:0;transform:translateY(36px);
  transition:opacity 1.1s cubic-bezier(.16,.84,.34,1),transform 1.1s cubic-bezier(.16,.84,.34,1);}
html.js .rv.in{opacity:1;transform:none;}

/* ---- Nav ---- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(14px,2vw,22px) clamp(18px,4vw,56px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(rgba(15,13,11,0.5),transparent);
  color:#f7f2e8;
  transition:background .5s ease,color .5s ease,border-color .5s ease,padding .5s ease;
}
.nav.scrolled{
  background:rgba(245,239,228,0.93);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:#23201b;
}
.navlinks{display:flex;gap:clamp(20px,2.4vw,38px);align-items:center;}
.navburger{display:none;}

/* ---- Layout grids ---- */
.featgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(16px,2vw,28px);}
.aboutgrid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:clamp(28px,4vw,72px);align-items:center;}
.contactgrid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:clamp(28px,5vw,80px);align-items:start;}

@media(max-width:900px){
  .navlinks{display:none;}
  .navburger{display:inline-flex;}
  .featgrid{grid-template-columns:1fr;}
  .aboutgrid{grid-template-columns:1fr;}
  .contactgrid{grid-template-columns:1fr;}
}

/* ---- Mobile menu ---- */
.mobile-menu{display:none;}
.mobile-menu.open{display:flex;}

/* ---- Animations ---- */
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes cue{0%{transform:translateY(0);opacity:.9;}80%{opacity:.2;}100%{transform:translateY(16px);opacity:0;}}

/* ---- Scrollbar ---- */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--line2);}