/* ═══════════════════════════════════════════════════
   LITTLE LAYERS · Site CSS
   Shared across Despre, Ateliere, Galerie, Contact.
   Matches palette + typography from index.html.
   ═══════════════════════════════════════════════════ */

:root{
  --cream: #F7F1E8;
  --cream-deep: #EFE6D7;
  --cream-warm: #F2E9D8;
  --cream-pale: #FBF7EE;
  --navy: #3F5C7A;
  --navy-deep: #2E4862;
  --navy-soft: rgba(63, 92, 122, 0.12);
  --navy-line: rgba(63, 92, 122, 0.18);
  --navy-faint: rgba(63, 92, 122, 0.06);
  --coral: #B8624E;
  --coral-deep: #9A4F3F;
  --sage: #6FA098;
  --sage-deep: #5A867E;
  --gold: #DBB04A;
  --gold-warm: #C9A449;
  --peach: #D98A6B;
  --ink: #2A3A4D;
  --muted: rgba(63, 92, 122, 0.65);

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --max-w: 1440px;
  --gutter: clamp(24px, 4vw, 64px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{background:var(--navy);color:var(--cream)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ───── TYPE ───── */
.label{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--coral);
  display:inline-flex;align-items:center;gap:14px;
}
.label::before{content:"";width:32px;height:1px;background:var(--coral);}
.label.sage{color:var(--sage-deep)}.label.sage::before{background:var(--sage)}
.label.gold{color:var(--gold-warm)}.label.gold::before{background:var(--gold)}
.label.navy{color:var(--navy)}.label.navy::before{background:var(--navy)}

.section-num{
  font-family:var(--sans);font-size:11px;letter-spacing:0.3em;
  color:var(--gold);text-transform:uppercase;font-weight:400;
}

.display{
  font-family:var(--serif);font-weight:500;color:var(--navy);
  font-size:clamp(40px, 7vw, 96px);line-height:1;letter-spacing:-0.025em;
}
.display em{font-style:italic;font-weight:400;color:var(--coral)}
.display .em-sage{color:var(--sage-deep)}
.display .em-gold{color:var(--gold-warm)}

h1.page-title{
  font-family:var(--serif);font-weight:500;color:var(--navy);
  font-size:clamp(48px, 7.5vw, 112px);line-height:0.98;
  letter-spacing:-0.025em;text-wrap:balance;
}
h1.page-title em{font-style:italic;font-weight:400;color:var(--coral)}
h1.page-title .em-sage{color:var(--sage-deep)}
h1.page-title .em-gold{color:var(--gold-warm)}

h2.h-l{
  font-family:var(--serif);font-weight:500;color:var(--navy);
  font-size:clamp(34px, 4.5vw, 64px);line-height:1.02;
  letter-spacing:-0.02em;text-wrap:balance;
}
h2.h-l em{font-style:italic;font-weight:400;color:var(--coral)}
h2.h-l .em-sage{color:var(--sage-deep)}
h2.h-l .em-gold{color:var(--gold-warm)}

h3.h-m{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--navy);font-size:clamp(26px, 3vw, 38px);
  line-height:1.1;letter-spacing:-0.012em;
}
h3.h-m .em-coral{color:var(--coral)}

.lede{
  font-family:var(--sans);font-size:clamp(16px, 1.25vw, 19px);
  line-height:1.65;color:var(--ink);font-weight:300;
  max-width:58ch;text-wrap:pretty;
}
.lede em{font-style:italic;font-family:var(--serif);font-weight:400;color:var(--coral)}

.body-l{
  font-family:var(--sans);font-size:17px;line-height:1.7;
  color:var(--ink);font-weight:300;max-width:60ch;text-wrap:pretty;
}
.caption{
  font-family:var(--sans);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted);font-weight:500;
}

/* ───── WORDMARK ───── */
.wordmark{
  display:inline-flex;align-items:baseline;gap:0;text-decoration:none;
}
.ll-little{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--navy);font-size:21px;letter-spacing:-0.005em;margin-right:5px;
}
.ll-layers{
  font-family:var(--sans);font-weight:500;font-size:17px;
  letter-spacing:0.06em;color:var(--navy);
}

/* ───── NAV ───── */
nav.top{
  position:sticky;top:0;z-index:100;
  background:rgba(247,241,232,0.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--navy-line);
}
.nav-inner{
  max-width:var(--max-w);margin:0 auto;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:24px;padding:18px var(--gutter);
}
.nav-links{
  list-style:none;display:flex;gap:34px;justify-content:center;
  font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
}
.nav-links a{
  color:var(--ink);padding:6px 0;position:relative;
  transition:color .3s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--coral);transform:scaleX(0);
  transform-origin:left;transition:transform .35s var(--ease);
}
.nav-links a:hover{color:var(--coral)}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1)}
.nav-links a.on{color:var(--coral)}

.nav-cta{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  padding:14px 24px;background:var(--navy);color:var(--cream);
  transition:all .3s var(--ease);
  display:inline-flex;align-items:center;gap:10px;
}
.nav-cta:hover{background:var(--coral)}
.nav-cta .arrow{transition:transform .35s var(--ease)}
.nav-cta:hover .arrow{transform:translateX(4px)}

.nav-burger{display:none;width:28px;height:18px;position:relative}
.nav-burger span{
  position:absolute;left:0;right:0;height:1px;background:var(--ink);
  transition:all .3s var(--ease);
}
.nav-burger span:nth-child(1){top:0}
.nav-burger span:nth-child(2){top:50%}
.nav-burger span:nth-child(3){bottom:0}

@media (max-width:920px){
  .nav-burger{display:block}
  .nav-links,.nav-cta{display:none}
  .nav-inner{grid-template-columns:auto 1fr}
  .nav-inner .nav-burger{justify-self:end}
  .nav-mobile-open .nav-links{
    display:flex;flex-direction:column;gap:0;
    position:fixed;top:64px;left:0;right:0;
    background:var(--cream);padding:20px var(--gutter);
    border-bottom:1px solid var(--navy-line);z-index:99;
  }
  .nav-mobile-open .nav-links li{border-top:1px solid var(--navy-line)}
  .nav-mobile-open .nav-links a{padding:18px 0;display:block;font-size:14px}
  .nav-mobile-open .nav-cta{
    display:inline-flex;position:fixed;bottom:24px;left:24px;right:24px;
    justify-content:center;z-index:99;
  }
}

/* ───── PAGE STRUCTURE ───── */
.page{max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
section.s{padding:clamp(60px, 8vw, 120px) 0;border-bottom:1px solid var(--navy-line)}
section.s:last-of-type{border-bottom:0}
section.s-hero{padding:clamp(60px, 8vw, 120px) 0 clamp(40px, 5vw, 80px)}

.col-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px, 5vw, 80px)}
.col-2-w{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(40px, 5vw, 80px)}
.col-2-n{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(40px, 5vw, 80px)}
.col-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px, 3vw, 40px)}
.col-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px, 2vw, 32px)}
.col-12{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}

@media (max-width:920px){
  .col-2,.col-2-w,.col-2-n{grid-template-columns:1fr;gap:48px}
  .col-3{grid-template-columns:1fr 1fr;gap:24px}
  .col-4{grid-template-columns:1fr 1fr;gap:20px}
}
@media (max-width:540px){
  .col-3,.col-4{grid-template-columns:1fr}
}

/* ───── IMAGES ───── */
.frame{position:relative;overflow:hidden;background:var(--cream-deep)}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame.sq{aspect-ratio:1/1}
.frame.tall{aspect-ratio:3/4}
.frame.wide{aspect-ratio:16/10}
.frame.cinema{aspect-ratio:21/9}
.frame.portrait{aspect-ratio:4/5}

.frame .frame-cap{
  position:absolute;left:18px;bottom:14px;right:18px;
  font-family:var(--sans);font-size:10.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--cream);
  display:flex;justify-content:space-between;gap:12px;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
  font-weight:500;
}
.frame .frame-cap .num{opacity:.7}

/* ───── BUTTONS ───── */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
  padding:18px 32px;transition:all .35s var(--ease);
}
.btn.primary{background:var(--navy);color:var(--cream)}
.btn.primary:hover{background:var(--coral);transform:translateY(-2px)}
.btn.ghost{border:1px solid var(--navy);color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:var(--cream)}
.btn .arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(5px)}

.link-arrow{
  font-family:var(--serif);font-style:italic;font-size:18px;
  color:var(--coral);border-bottom:1px solid var(--coral);
  padding-bottom:2px;display:inline-flex;gap:10px;align-items:baseline;
  transition:gap .3s var(--ease);
}
.link-arrow::after{content:"→";font-family:var(--sans);font-style:normal}
.link-arrow:hover{gap:16px}

/* ───── PULL QUOTES & RULES ───── */
.pull{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--navy);font-size:clamp(24px, 2.6vw, 36px);
  line-height:1.25;letter-spacing:-0.012em;text-wrap:balance;
  max-width:24ch;
}
.pull em{font-style:normal;font-weight:500;color:var(--coral)}
.rule{border:0;height:1px;background:var(--navy-line);margin:0}
.rule-ink{border:0;height:1px;background:var(--navy)}

/* ───── KEY/VALUE STRIPS ───── */
.kv-row{
  display:grid;grid-template-columns:160px 1fr;gap:24px;
  padding:16px 0;border-top:1px solid var(--navy-line);
  align-items:baseline;
}
.kv-row:last-child{border-bottom:1px solid var(--navy-line)}
.kv-row .k{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);
}
.kv-row .v{
  font-family:var(--serif);font-weight:500;font-size:19px;
  color:var(--navy);letter-spacing:-0.005em;line-height:1.35;
}
.kv-row .v em{color:var(--coral);font-style:italic;font-weight:400}

/* ───── FOOTER ───── */
footer.site{
  background:var(--cream-deep);padding:80px var(--gutter) 32px;
  border-top:1px solid var(--navy-line);
}
.foot-inner{
  max-width:var(--max-w);margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px;align-items:start;
}
.foot-mark{
  font-family:var(--serif);font-size:64px;font-weight:300;
  color:var(--navy);line-height:0.95;letter-spacing:-0.022em;
  display:block;margin-bottom:18px;
}
.foot-mark em{font-style:italic;color:var(--coral);font-weight:400}
.foot-tagline{
  font-family:var(--serif);font-style:italic;font-size:18px;
  color:var(--muted);line-height:1.5;max-width:36ch;
}
.foot-col h4{
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--muted);margin-bottom:18px;
}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-col a{
  font-family:var(--serif);font-size:18px;color:var(--navy);
  transition:color .3s var(--ease);
}
.foot-col a:hover{color:var(--coral)}
.foot-bottom{
  max-width:var(--max-w);margin:48px auto 0;
  padding-top:32px;border-top:1px solid var(--navy-line);
  display:flex;justify-content:space-between;gap:24px;
  font-family:var(--sans);font-size:12px;color:var(--muted);
  letter-spacing:0.04em;flex-wrap:wrap;
}
@media (max-width:920px){
  .foot-inner{grid-template-columns:1fr 1fr;gap:36px}
  .foot-mark{font-size:48px}
}
@media (max-width:560px){
  .foot-inner{grid-template-columns:1fr}
}

/* ───── (formerly .reveal — now no-op; crisp page loads suit editorial design) ───── */
.reveal{opacity:1;transform:none}