/* La Finca Coffee — shared stylesheet (v2 design system) */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;background:#1A110A}
.lfx{
  --roast:#1A110A;
  --roast-2:#261A10;
  --roast-3:#2F2114;
  --line:#3B2B1B;
  --cream:#F2E8D7;
  --latte:#C4B196;
  --caramel:#C89557;
  --caramel-deep:#A87A3F;
  --paper:#EDE3D2;
  --paper-card:#F7F0E2;
  --paper-line:#D8C9AE;
  --paper-ink:#221710;
  --paper-muted:#6E5B43;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  background:var(--roast); color:var(--cream);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.lfx *{box-sizing:border-box}
.lfx .wrap{max-width:1160px; margin:0 auto; padding:0 5vw}
.lfx a{color:inherit}
.lfx :focus-visible{outline:2px solid var(--caramel); outline-offset:3px; border-radius:2px}
.lfx img{max-width:100%; display:block}

/* ---------- top bar + nav ---------- */
.lfx .topbar{
  background:var(--roast-2); border-bottom:1px solid var(--line);
  text-align:center; padding:9px 16px;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--latte);
}
.lfx header.lnav{
  position:sticky; top:0; z-index:10;
  background:rgba(26,17,10,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.lfx .nav-in{
  max-width:1160px; margin:0 auto; padding:16px 5vw;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.lfx .brand{display:flex; flex-direction:column; gap:1px; text-decoration:none}
.lfx .brand .word{font-family:var(--serif); font-size:26px; font-weight:500; letter-spacing:.01em; line-height:1; color:var(--cream)}
.lfx .brand .tag{font-size:9.5px; letter-spacing:.42em; text-transform:uppercase; color:var(--caramel)}
.lfx nav.links{display:flex; gap:30px}
.lfx nav.links a{
  text-decoration:none; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--latte);
  transition:color .18s;
}
.lfx nav.links a:hover{color:var(--cream)}
.lfx nav.links a.here{color:var(--cream); border-bottom:1px solid var(--caramel); padding-bottom:3px}
.lfx .bag{
  font-size:13px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:9px 18px; color:var(--cream);
  transition:border-color .18s; white-space:nowrap;
}
.lfx .bag:hover{border-color:var(--caramel)}

/* ---------- hero ---------- */
.lfx .hero{padding:84px 0 64px; border-bottom:1px solid var(--line)}
.lfx .hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:56px; align-items:center}
.lfx .eyebrow{
  font-family:var(--sans); font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--caramel);
  margin:0 0 22px;
}
.lfx h1{
  font-family:var(--serif); font-weight:420; font-size:clamp(44px,6.2vw,76px);
  line-height:1.04; margin:0 0 26px; text-wrap:balance; letter-spacing:-.01em; color:var(--cream);
}
.lfx h1 em{font-style:italic; color:var(--caramel)}
.lfx .lede{font-size:18px; color:var(--latte); max-width:34em; margin:0 0 34px}
.lfx .ctas{display:flex; flex-wrap:wrap; gap:14px}
.lfx .btn{
  display:inline-block; text-decoration:none; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  padding:16px 28px; border-radius:2px; transition:background .18s,border-color .18s,color .18s;
  font-family:var(--sans); border:0; cursor:pointer;
}
.lfx .btn-p{background:var(--caramel); color:#1A110A; font-weight:600}
.lfx .btn-p:hover{background:var(--caramel-deep); color:var(--cream)}
.lfx .btn-o{border:1px solid var(--line); color:var(--cream); background:transparent}
.lfx .btn-o:hover{border-color:var(--caramel); color:var(--caramel)}
.lfx .hero-facts{
  margin-top:46px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px 34px;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--latte);
}
.lfx figure.framed{margin:0}
.lfx .framed img{border:1px solid var(--line); border-radius:2px; width:100%; height:auto}
.lfx .framed figcaption{
  margin-top:12px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--latte);
}
@media (prefers-reduced-motion:no-preference){
  .lfx .hero-grid > *{opacity:0; transform:translateY(14px); animation:lfx-rise .7s ease forwards}
  .lfx .hero-grid > *:nth-child(2){animation-delay:.15s}
  @keyframes lfx-rise{to{opacity:1; transform:none}}
}

/* ---------- section scaffolding ---------- */
.lfx section{padding:84px 0}
.lfx h2{
  font-family:var(--serif); font-weight:440; font-size:clamp(30px,3.6vw,44px);
  line-height:1.12; margin:0 0 14px; text-wrap:balance; letter-spacing:-.005em; color:var(--cream);
}
.lfx .sect-head{max-width:640px; margin-bottom:48px}
.lfx .sect-head p{color:var(--latte); margin:0}

/* ---------- interior page head ---------- */
.lfx .page-head{padding:72px 0 0}
.lfx .page-head h1{font-size:clamp(36px,4.6vw,56px)}
.lfx .page-head .lede{margin-bottom:0}

/* ---------- roast cards ---------- */
.lfx .roast-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.lfx .roast-grid.fav{grid-template-columns:repeat(3,1fr)}
.lfx .roast{
  background:var(--roast-2); border:1px solid var(--line); border-radius:2px;
  padding:28px 24px 22px; display:flex; flex-direction:column; min-height:290px;
  transition:transform .2s ease,border-color .2s ease;
}
.lfx .roast:hover{transform:translateY(-4px); border-color:var(--caramel)}
@media (prefers-reduced-motion:reduce){ .lfx .roast, .lfx .roast:hover{transform:none; transition:none} }
.lfx .roast .kind{font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--caramel); margin:0 0 14px}
.lfx .roast h3{font-family:var(--serif); font-weight:460; font-size:27px; line-height:1.05; margin:0 0 10px; color:var(--cream)}
.lfx .roast .notes{font-family:var(--serif); font-style:italic; font-size:15px; color:var(--latte); margin:0 0 8px}
.lfx .roast .body{font-size:13.5px; color:var(--latte); margin:0; line-height:1.5}
.lfx .roast .buy{
  margin-top:auto; padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.lfx .roast .price{font-family:var(--serif); font-size:19px; font-variant-numeric:tabular-nums; color:var(--cream)}
.lfx .roast .price small{
  font-family:var(--sans); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--latte);
  margin-right:4px;
}
.lfx .add{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--caramel); color:var(--caramel); padding:10px 16px; border-radius:2px;
  transition:background .18s,color .18s;
}
.lfx .add:hover{background:var(--caramel); color:#1A110A}
.lfx .shop-note{margin-top:30px; font-size:13px; color:var(--latte); letter-spacing:.02em}
.lfx .shop-note a{color:var(--caramel)}
.lfx .after-grid{margin-top:36px}

/* ---------- location tiles (home) ---------- */
.lfx .tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.lfx .tile{
  display:block; position:relative; text-decoration:none; background:var(--roast-2);
  border:1px solid var(--line); border-radius:2px; overflow:hidden;
  transition:border-color .2s ease;
}
.lfx .tile .cover{position:absolute; inset:0; z-index:1}
.lfx .hero-grid .framed.compact{max-width:400px; justify-self:center; width:100%}
.lfx .tile:hover{border-color:var(--caramel)}
.lfx .tile img{width:100%; height:230px; object-fit:cover}
.lfx .tile .ph{
  height:230px; display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(160deg,var(--roast-3),var(--roast-2));
  font-family:var(--serif); font-style:italic; color:var(--caramel); font-size:15px;
  letter-spacing:.04em; padding:0 24px;
}
.lfx .tile .tpad{padding:20px 22px 24px}
.lfx .tile h3{font-family:var(--serif); font-weight:460; font-size:24px; margin:0 0 4px; color:var(--cream)}
.lfx .tile .tsub{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--latte); margin:0 0 14px}
.lfx .tile .more{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--caramel);
  border-bottom:1px solid var(--caramel); padding-bottom:2px;
}

/* ---------- menu page ---------- */
.lfx .menus{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.lfx .menus img{width:100%; border:1px solid var(--line); border-radius:2px}
.lfx .menu-group{margin-bottom:64px}
.lfx .menu-group h2{margin-bottom:24px}

/* ---------- locations page ---------- */
.lfx .loc{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center;
  padding:56px 0; border-bottom:1px solid var(--line);
}
.lfx .loc:last-of-type{border-bottom:0}
.lfx .loc h2{margin-bottom:8px}
.lfx .loc h2 span{font-style:italic; font-weight:400; color:var(--caramel)}
.lfx .loc p{color:var(--latte); margin:0 0 10px; max-width:36em}
.lfx .loc p.addr{color:var(--cream); font-size:17px}
.lfx .loc p.hrs{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase}
.lfx .loc a.tel{color:var(--cream)}

.lfx .ph-block{
  height:280px; display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(160deg,var(--roast-3),var(--roast-2));
  border:1px solid var(--line); border-radius:2px;
  font-family:var(--serif); font-style:italic; color:var(--caramel); font-size:15px;
  letter-spacing:.04em; padding:0 24px;
}

/* ---------- cafés (paper section, kept for reuse) ---------- */
.lfx .paper{background:var(--paper); color:var(--paper-ink); border-top:1px solid var(--line)}
.lfx .paper .eyebrow{color:var(--caramel-deep)}
.lfx .paper h2{color:var(--paper-ink)}
.lfx .paper .sect-head p{color:var(--paper-muted)}

/* ---------- story ---------- */
.lfx .story-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:center}
.lfx .story-grid .framed{max-width:400px}
.lfx .story-copy p{color:var(--latte); font-size:16.5px; line-height:1.7; margin:0 0 18px; max-width:36em}
.lfx .story-copy p strong{color:var(--cream); font-weight:500}

/* ---------- subscribe band ---------- */
.lfx .band{background:var(--roast-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.lfx .band-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start}
.lfx .band h2{font-size:clamp(26px,3vw,36px)}
.lfx .band p{color:var(--latte); margin:0 0 22px; max-width:30em}

/* ---------- footer ---------- */
.lfx footer.lfoot{padding:64px 0 40px}
.lfx .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--line)}
.lfx footer.lfoot h4{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--caramel);
  margin:0 0 14px; font-weight:600; font-family:var(--sans);
}
.lfx footer.lfoot p{margin:0 0 6px; font-size:14.5px; color:var(--latte)}
.lfx footer.lfoot p a{color:var(--latte)}
.lfx .foot-brand{font-family:var(--serif); font-size:24px; color:var(--cream); margin:0 0 10px}
.lfx .baseline{
  padding-top:22px; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  font-size:12px; color:var(--latte); letter-spacing:.06em;
}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .lfx .roast-grid{grid-template-columns:1fr 1fr}
  .lfx .roast-grid.fav{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .lfx nav.links{display:none}
  .lfx .hero{padding:56px 0 48px}
  .lfx .hero-grid,.lfx .story-grid,.lfx .band-grid,.lfx .foot-grid,.lfx .tiles,.lfx .menus,.lfx .loc{grid-template-columns:1fr}
  .lfx .story-grid .framed{max-width:100%}
  .lfx section{padding:64px 0}
  .lfx .loc{padding:40px 0}
}
@media (max-width:560px){
  .lfx .roast-grid,.lfx .roast-grid.fav{grid-template-columns:1fr}
}