/* ============================================================
   FARE — Atelier d'architecture · minimal / precise
   New technique: sticky-stacked project cards
   Type: Space Grotesk (display) + Inter (body)
   ============================================================ */
:root{
  --paper:#F1F0EB; --ink:#16150F; --concrete:#86857A;
  --soft:rgba(22,21,15,.6); --faint:rgba(22,21,15,.34); --line:rgba(22,21,15,.16);
  --clay:#9E4B2F;
  --display:"Space Grotesk", sans-serif;
  --body:"Inter", system-ui, sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(1.4rem,5vw,5rem);
}
*{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family:var(--body); background:var(--paper); color:var(--ink); font-size:16px; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
::selection{ background:var(--ink); color:var(--paper); }
a{ color:inherit; text-decoration:none; }
.eyebrow{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--clay); }

/* INTRO */
.intro{ position:fixed; inset:0; z-index:200; background:var(--ink); transform-origin:top; }

/* NAV */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:1.4rem var(--pad); }
.nav__brand{ font-family:var(--display); font-weight:600; font-size:1.3rem; letter-spacing:-.01em; display:flex; gap:.15em; }
.nav__brand span{ font-size:.7em; color:var(--clay); }
.nav__links{ display:flex; gap:1.8rem; }
.nav__links a{ font-size:.82rem; color:var(--soft); transition:color .16s var(--ease); }
.nav__links a:hover{ color:var(--ink); }

/* HERO */
.hero{ min-height:100svh; display:flex; flex-direction:column; justify-content:space-between; padding:7rem var(--pad) 2.5rem; }
.hero__top{ display:flex; gap:2.4rem; flex-wrap:wrap; font-size:.8rem; color:var(--soft); letter-spacing:.02em; border-bottom:1px solid var(--line); padding-bottom:1.4rem; }
.hero__title{ font-family:var(--display); font-weight:500; font-size:clamp(2.8rem,9vw,8rem); line-height:.98; letter-spacing:-.03em; margin:auto 0; }
.line{ display:block; overflow:hidden; }
.line > span{ display:block; will-change:transform; }
.hero__foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; }
.hero__lede{ max-width:30rem; color:var(--soft); }
.hero__idx{ font-family:var(--display); font-size:.82rem; letter-spacing:.04em; color:var(--ink); }

/* STICKY-STACK PROJECTS */
.stack{ padding:0 var(--pad) 6rem; }
.proj{
  position:sticky; top:9vh;
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  min-height:78vh; border-radius:16px; overflow:hidden;
  background:var(--bg); color:var(--fg);
  margin-bottom:3vh; box-shadow:0 -10px 40px -20px rgba(0,0,0,.4);
  will-change:transform;
}
.proj__l{ padding:clamp(1.6rem,4vw,3.4rem); display:flex; flex-direction:column; justify-content:space-between; gap:2rem; }
.proj__n{ font-family:var(--display); font-size:1rem; opacity:.6; }
.proj__l h2{ font-family:var(--display); font-weight:500; font-size:clamp(2rem,4.5vw,3.8rem); line-height:1; letter-spacing:-.02em; margin-top:auto; }
.proj__l p{ opacity:.78; max-width:26rem; margin-top:1rem; }
.proj__meta{ font-size:.8rem; letter-spacing:.04em; opacity:.55; margin-top:1.4rem; }
.proj__r{ background:linear-gradient(150deg,var(--c1),var(--c2)); position:relative; }
.proj__r::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 68% 22%, rgba(255,255,255,.12), transparent 56%); }

/* STATEMENT */
.statement{ padding:clamp(7rem,18vh,14rem) var(--pad); max-width:60rem; margin:0 auto; }
.statement__line{ font-family:var(--display); font-weight:500; font-size:clamp(1.7rem,4.2vw,3.2rem); line-height:1.22; letter-spacing:-.01em; }
.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word > span{ display:inline-block; will-change:transform; }

/* INVITE */
.invite{ text-align:center; padding:clamp(6rem,14vh,11rem) var(--pad); display:flex; flex-direction:column; align-items:center; gap:1.4rem; border-top:1px solid var(--line); }
.invite__title{ font-family:var(--display); font-weight:500; font-size:clamp(2.4rem,7vw,5.4rem); line-height:1; letter-spacing:-.02em; }
.invite__btn{ margin-top:1rem; display:inline-flex; align-items:center; gap:.7rem; padding:1.05rem 2rem; border-radius:100px; background:var(--ink); color:var(--paper); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; transition:gap .18s var(--ease); }
.invite__btn:hover{ gap:1.2rem; }

/* FOOTER */
.foot{ border-top:1px solid var(--line); padding:3rem var(--pad); display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.foot__brand{ font-family:var(--display); font-weight:600; font-size:clamp(3rem,12vw,8rem); line-height:.8; letter-spacing:-.03em; }
.foot__cols{ display:flex; flex-direction:column; gap:.3rem; text-align:right; color:var(--faint); font-size:.84rem; }

@media (max-width:760px){
  .nav__links{ gap:1.1rem; }
  .proj{ grid-template-columns:1fr; min-height:auto; }
  .proj__r{ min-height:200px; order:-1; }
  .hero{ padding-top:6rem; }
}